<script>
import axios from "axios";

export default {
  name: "ArticleD",
  data() {
    return {
      pullDown:true,
      markdownOption: {},
      article: {},
      commentList: [],
      commentForm: {},
      id: this.$route.query.id,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      dialogFormVisible: false

    }
  },
  created() {
    this.load();
    this.loadComment();
  },
  methods: {
    load() {
      this.request.get("/article/" + this.id).then(res => {
        this.article = res.data;
      });
    },
    loadComment() {
      this.request.get("/comment/tree/" + this.id).then(res => {
        if (res.code === 200) {
          this.commentList = res.data;
          console.log(res.data);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
            center: true
          })
        }
      })
    },
    del(id) {
      this.request.delete("/comment/delete/" + id).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "删除成功",
            center: true
          })
          this.loadComment();
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
            center: true
          })
        }
      })
    },
    handleReply(pid,userName){
      this.commentForm.userName=userName;
       this.commentForm.pid=pid;
       this.dialogFormVisible=true;
    },
    save(){
      if(!this.user.userId){
        this.$message.warning("请登录后操作");
        return ;
      }
      this.commentForm.articleId=this.id;
      if(this.commentForm.contentReply){
        this.commentForm.content=this.commentForm.contentReply;
      }else{
        if(!this.commentForm.content){
          this.$message({
            type:"error",
            message:"请输入评论内容",
            center:true
          })
          return;
        }
      }
      this.request.post("/comment/save",this.commentForm).then(res=>{
        if(res.code===200){
          this.$message({
            type:"success",
            message:"评论成功",
            center:true
          });
          this.dialogFormVisible=false;
          this.commentForm={};
          this.loadComment();
        }else{
          this.$message({
            type:"error",
            message:res.msg,
            center:true
          });
        }
      })
    }
  }
}
</script>

<template>
  <div style="color:#666666">
    <div style="margin: 20px 0">
      <div class="pd-10" style="font-size: 20px;color: #666666;">{{ article.title }}</div>
      <div style="font-size:14px;margin-top: 10px ">
        <i class="el-icon-user-solid" style="margin-right: 5px"></i><span>{{ article.publisher }}</span>
        <i class="el-icon-time" style="margin-left:20px;margin-right: 5px"></i><span>{{ article.pubdate }}</span>
      </div>
    </div>
    <div style="margin: 20px 0">
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
      />
    </div>
    <div style="margin:30px 0">
      <div style="border-bottom: 1px solid orangered;padding:10px 0;font-size:20px">评论</div>
      <div style="padding:10px 0;display: flex">
        <el-image :src="user.avatar" style="width:50px;height:50px;border-radius:50% "></el-image><el-input size="small" type="textarea" v-model="commentForm.content" placeholder="发布你的评论" style="flex: 1"></el-input>
      </div>
      <div class="pd-10" style="text-align:right">
        <el-button type="primary" size="small" round @click="save">评论</el-button>
      </div>
    </div>

    <div>
      <div v-for="item in commentList" :key="item.id" style="border-bottom:1px solid #ccc;padding:10px 0">
        <div style="display:flex">
          <div style="width:100px;text-align: center">
            <el-image :src="item.avatar" style="width:50px;height:50px;border-radius:50%"></el-image>
          </div>
          <div style="flex:1;font-size: 14px;padding:5px 0;line-height: 25px">
            <b>{{ item.userName }}:</b>
            <span style="margin-left: 5px">{{ item.content }}</span>
            <div style="display:flex;line-height:20px;margin-top:5px">
              <div style="width:200px">
                <i class="el-icon-time"></i><span style="margin-left: 5px">{{ item.commentTime }}</span>
              </div>
              <div style="text-align: right; flex: 1">
                <el-tooltip content="回复" placement="bottom" effect="light"> <el-button  type="text" @click="handleReply(item.id,item.userName)"><i class="el-icon-s-comment" style="font-size:20px"></i></el-button></el-tooltip>
                <el-tooltip content="删除" placement="bottom" effect="light">
                <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="你确定要删除吗"
                    @confirm="del(item.id)"
                >
                  <el-button slot="reference" style="color:red;margin-left: 8px" type="text" v-if="user.userId===item.commentatorId"><i class="el-icon-delete-solid" style="font-size:20px"></i></el-button>
                </el-popconfirm>
                </el-tooltip>
                <el-tooltip content="取消点赞" placement="bottom" effect="light"><el-button style="margin-left: 5px" type="text"><i class="el-icon-star-on" style="font-size:24px"></i></el-button></el-tooltip>
                <el-tooltip content="点赞" placement="bottom" effect="light"><el-button style="margin-left: 5px" type="text"><i class="el-icon-star-off" style="font-size:20px"></i></el-button></el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <el-collapse-transition>
       <div v-if="item.childrenList.length" style="padding-left: 105px">
         <div v-for="(subItem,index) in item.childrenList" :key="subItem.id" style="background-color:#f0f0f0;padding:5px 20px" v-if="!pullDown||index<2">
          <div style="font-size:14px;padding :5px 0;line-height: 25px">
            <div>
              <b style="color: #3a8ee6" v-if="subItem.puserName" >@{{subItem.puserName}}</b>
            </div>
            <div style="padding-left: 5px">
              <b>{{subItem.userName}}:</b>
              <span style="margin-left: 5px">&ensp;{{subItem.content}}</span>
            </div>
            <div style="display: flex; line-height: 20px; margin-top: 5px; padding-left: 5px">
              <div style="width: 200px;">
                <i class="el-icon-time"></i><span style="margin-left: 5px">{{ subItem.commentTime }}</span>
              </div>
              <div style="text-align: right; flex: 1">
                <el-tooltip content="回复" placement="bottom" effect="light"><el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id,subItem.userName)"><i class="el-icon-s-comment" style="font-size:20px"></i></el-button></el-tooltip>
                <el-tooltip content="删除" placement="bottom" effect="light">
                <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="你确定要删除吗"
                    @confirm="del(subItem.id)"
                >
                 <el-button slot="reference"   style="color:red;margin-left: 8px" type="text" v-if="user.userId===subItem.commentatorId"><i class="el-icon-delete-solid" style="font-size:20px"></i></el-button>
                </el-popconfirm>
                </el-tooltip>
                <el-tooltip content="取消点赞" placement="bottom" effect="light"><el-button style="margin-left: 5px" type="text"><i class="el-icon-star-on" style="font-size:24px"></i></el-button></el-tooltip>
                <el-tooltip content="点赞" placement="bottom" effect="light"><el-button style="margin-left: 5px" type="text"><i class="el-icon-star-off" style="font-size:20px"></i></el-button></el-tooltip>
              </div>
            </div>
          </div>
        </div>

         <div v-if="item.childrenList.length>2">
           <span v-if="pullDown"><el-button type="text" size="medium" @click="pullDown=false">共{{item.replies}}条回复<i class="el-icon-arrow-down"></i></el-button></span>
           <span v-else><el-button type="text" size="medium" @click="pullDown=true">收起回复<i class="el-icon-arrow-up"></i></el-button></span>
         </div>
       </div>
        </el-collapse-transition>
      </div>
    </div>
    <el-dialog  :visible.sync="dialogFormVisible" width="50%" style="height: 1500px">
      <template slot="title">
        <span style="font-weight: bold">回复@{{commentForm.userName}}</span>
      </template>
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容">
    <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save"  size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<style scoped>
/deep/.el-dialog {
  border-radius: 0.8rem !important;
}
/deep/.el-dialog__body {
  border-radius: 0.8rem !important;
}
</style>


